<style>
  @media (max-width: 960px) {
    .controller-container {
      display: none;
    }
  }

  .controller-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

  .controller-container .controller-button {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 100%;
    color: gray;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .controller-container .controller-button:active {
    background: gainsboro;
  }

  .controller-container .controller-hint {
    display: flex;
    margin-right: 10px;
    background: #636e72;
    color: white;
    border-radius: 20px;
    padding: 10px 20px 10px 20px;
    font-size: 12px;
    opacity: 0;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }

  .controller-container .bg-anim-controller {
    display: flex;
    align-items: center;
  }
</style>

<!-- Controller Container -->
<div class="controller-container">
  <section id="bg-anim-controller" class="bg-anim-controller">
    <div id="controller-hint-bg-anim" class="controller-hint">
      <span>显示/隐藏背景动画</span>
    </div>
    <div id="controller-button" class="controller-button">
      <svg t="1603729319961" class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4380" width="128" height="128">
        <path
          d="M503.098027 75.434667c13.909333 0 28.16 9.813333 42.581333 28.757333l0.597333 1.28 0.512 0.938667 0.597334 0.853333c30.293333 46.421333 82.773333 129.194667 111.786666 172.714667 14.421333 22.954667 35.84 39.509333 61.952 46.08l169.216 47.701333 2.133334 0.597333h0.512c22.613333 9.216 35.925333 20.309333 39.850666 33.109334 4.010667 14.421333-0.597333 31.573333-15.530666 52.650666l-123.989334 168.106667a108.885333 108.885333 0 0 0-21.162666 71.424l9.642666 189.269333v0.512c-1.194667 26.709333-6.826667 44.373333-17.664 53.077334a31.317333 31.317333 0 0 1-20.48 6.485333c-7.68 0-16.64-1.706667-27.306666-5.290667l-188.245334-71.338666a95.232 95.232 0 0 0-35.84-6.656 112.64 112.64 0 0 0-42.154666 8.277333l-162.816 67.413333c-18.005333 5.973333-31.402667 9.898667-42.069334 9.898667-7.509333 0-12.544-1.962667-16.298666-6.570667-6.826667-8.874667-9.728-27.136-7.338667-55.210666l5.546667-215.722667a104.362667 104.362667 0 0 0-23.04-71.424c-16.64-19.797333-35.84-46.336-48.213334-61.696-20.650667-26.282667-41.472-51.456-61.098666-77.738667v-0.597333l-2.474667-4.010667C77.114027 433.152 72.07936 414.634667 77.284693 399.786667c4.693333-11.52 17.578667-22.101333 39.082667-29.013334l192.938667-60.330666c24.661333-8.362667 45.568-24.746667 60.074666-47.616l93.952-157.525334c13.141333-19.968 25.941333-29.866667 39.765334-29.866666z m0-75.434667c-29.013333 0-68.693333 12.714667-102.058667 65.194667L306.06336 223.488a42.581333 42.581333 0 0 1-19.626667 14.677333l-193.536 59.989334c-45.226667 14.336-75.434667 40.789333-86.698666 76.885333-12.373333 34.56-5.290667 75.605333 21.162666 119.893333a22.101333 22.101333 0 0 0 5.546667 8.448c36.522667 48.128 74.410667 94.976 110.933333 143.104 3.328 9.216 5.802667 17.664 9.045334 26.794667l-5.376 210.090667c-3.072 47.274667 5.290667 83.882667 26.026666 108.202666 18.602667 20.650667 43.690667 32.426667 73.045334 32.426667 18.944 0 40.618667-4.778667 64.682666-16.896l163.498667-67.072a38.058667 38.058667 0 0 1 12.032-2.048c4.096 0 8.106667 0.682667 11.946667 2.133333l190.293333 71.68 2.816 0.938667h1.706667c17.237333 5.632 33.28 8.533333 48.128 8.533333 14.506667 0 40.96-3.328 64.682666-20.992 24.917333-18.688 45.994667-52.48 48.213334-111.616v-1.621333l-11.093334-192.170667c0-6.826667 1.706667-14.677333 6.656-21.674666l123.989334-170.922667c29.269333-40.789333 38.4-81.322667 27.306666-118.613333-11.093333-38.656-41.130667-66.56-88.832-83.797334l-1.706666-0.682666a19.626667 19.626667 0 0 0-4.693334-1.450667L738.44736 251.989333a42.325333 42.325333 0 0 1-19.285333-14.848c-36.693333-56.746667-73.813333-115.456-112.213334-174.08l-0.853333-1.877333L605.32736 59.733333 604.474027 58.624C576.484693 20.736 539.876693 0 503.012693 0z"
          p-id="4381" fill="#8a8a8a"></path>
        <path
          d="M853.64736 85.333333v85.333334h457.130667V85.333333zM1024.314027 853.333333v85.333334h274.261333v-85.333334zM1109.64736 426.666667v85.333333h182.869333V426.666667z"
          p-id="4382" fill="#8a8a8a"></path>
      </svg>
    </div>
  </section>
</div>

<script>
  (function () {
    "use strict";
    var _a;
    let hintDomStyle = (_a = document.getElementById('controller-hint-bg-anim')) === null || _a === void 0 ? void 0 :
      _a.style;
    let bgControllerButton = document.getElementById('controller-button');
    let bgAnimDom = document.getElementById('canvas');
    bgControllerButton === null || bgControllerButton === void 0 ? void 0 : bgControllerButton.addEventListener(
      'mouseover',
      function () {
        hintDomStyle.opacity = '1';
      });
    bgControllerButton === null || bgControllerButton === void 0 ? void 0 : bgControllerButton.addEventListener(
      'mouseout',
      function () {
        hintDomStyle.opacity = '0';
      });
    bgControllerButton === null || bgControllerButton === void 0 ? void 0 : bgControllerButton.addEventListener(
      'click',
      function () {
        if (bgAnimDom.style.display != '' && bgAnimDom.style.display != 'none') {
          bgAnimDom.style.display = 'none';
        } else {
          bgAnimDom.style.display = 'block';
        }
      });
  })();
</script>